<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>代办事项</title>

	</head>
	<style type="text/css">
		*{
            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑";
        }
		.daiBaiDiv{
			width: 575px;
		    height: 597px;
		    background: #f8f8f8;
		    margin: auto auto;
		    left: 0;
		    bottom: 0;
		    right: 0;
		    top: 0;
		    position: absolute;
		    /*padding: 15px;*/
		    overflow-y: hidden;
		    /*overflow-x: hidden;*/
		    /*border: solid 1px #9E9E9E;*/
		}
		.search_daiban{
			    width: 230px;
			    height: 30px;
			    line-height: 30px;
			    /* border-radius: 3px; */
			    float: right;
			    border: solid 1px #EEEEEE;
			    border-radius: 4px;
			    margin:  13px 5px 0 0;
			    padding-left: 10px;
		}
		.daiBai_li{
			    height: 542px;
   				 overflow-y: scroll;
		}
		.daiBai_li li{
			list-style: none;
		       margin: 0px 0 16px 0;
		    position: relative;
		    background: #ffffff;
		    height: 100px;
		    cursor: pointer;
		}
		.daiBai_li .daiBai_li_img{
			position: absolute;
			width: 56px;
			height: 56px;
			left: 22px;
    		top: 22px;
		}
		.daiBai_li p,.daiBai_li span{
			position: absolute;
			font-size: 14px;
			left: 95px;
			font-family: "微软雅黑";
		}
		.daiBai_li .name{
			top: 18px;
    font-size: 13px;
    color: #666666;
    letter-spacing: 2px;
    width: 340px;
    overflow: hidden;
    height: 22px;
		}
		.daiBai_li .title{
			top: 43px;
			font-size: 15px;
			color: #333333;
			letter-spacing: 2px;
		}
		.daiBai_li .from{
			top: 69px;
			font-size: 13px;
			color: #999999;
			letter-spacing: 2px;
			 width: 340px;
		    overflow: hidden;
		    height: 22px;
		}
		.daiBai_li .date{
			right: 20px;
		    left: unset;
		    top: 17px;
		    font-size: 14px;
		    color: #666666;
		}
		::-webkit-scrollbar-track-piece { /*滚动条凹槽的颜色，还可以设置边框属性*/
				background-color:#f8f8f8;

			}
			::-webkit-scrollbar {/*滚动条的宽度*/
			width:5px;
			height:5px;

			}
			::-webkit-scrollbar-thumb {/*滚动条的设置*/
			background-color:#dddddd;
			background-clip:padding-box;
			min-height:28px;
				float: right;
			}
			::-webkit-scrollbar-thumb:hover {
			background-color:#bbb;
			}

		.daiBai_title{
			height: 56px;
		    line-height: 56px;
		    background: #FFFFFF;
		    border-bottom: solid 1px #e0e0e0;
		    padding-left: 20px;
		    font-size: 16px;
		    letter-spacing: 4px;
		}
		.daiBai_title span{
			font-size: 18px;
		    color: #f80000;
		 	 cursor: pointer;
		}
		.search_button{
			float: right;
		    width: 54px;
		    height: 30px;
		    line-height: 30px;
		    color: white;
		    background: #599fe6;
		    border: none;
		    margin: 13px 10px 0 0;
		    border-radius: 4px;
		    cursor: pointer;
		}
		.input_cancel_button{
			position: absolute;
		    top: 24px;
		    right: 140px;
		    width: 10px;
		    cursor: pointer;
		}


	</style>
	<script src="javascript/api.js"></script> <!-- api.js必须放到最开头 -->
    <script src="javascript/axios.js"></script>
    <script src="javascript/vue.js"></script>
    <script src="javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div class="daiBaiDiv" id ="daiBaiDiv">
			<div class="daiBai_title">
				共搜索出<span>{{daiBai_li_length}}</span>条结果
				<button class="search_button" @click="refresh" style="background: #8ac140;">刷新</button>
				<button class="search_button" @click="searchDaiBan">搜索</button>
				<input type="" name="" id="" value="" v-model="inputSearch" placeholder="输入发送人姓名、任务标题搜索"  class="search_daiban"  @keyup.enter="searchDaiBan"/>
				<img v-if="show_cancel_button"  class="input_cancel_button" src="images/weChat/no.png"  @click="inputCancel"/>
			</div>
			<div class="daiBai_li"  >
				<ul>
					<li v-for="item in daiBai_li" @click="openDaiBan">
						<img onerror="this.src='images/lefticon/user.png'"    class="daiBai_li_img" :src="item.sendImg?item.sendImg:'images/lefticon/user.png'"/>
						<p class="name">{{item.sendName}}/{{item.sendDep}}</p>
						<p class="title">{{item.title}}</p>
						<p class="from">来自 ：{{item.sendFrom}}</p>
						<span class="date">{{item.createdDate}}</span>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let TOKEN  = localStorage.token;
		new Vue({
			el:'#daiBaiDiv',
			data:{
				inputSearch:'',
				lastInputSearch:'',
				url:developURL+':8085/task/selectByCondition?access_token='+TOKEN,
				pageSize:5,
				isLoad:true,
				show_cancel_button:false,
				daiBai_li_length:0,
				daiBai_li:[
				],
			},
			methods:{
				refresh(){
					location.reload();
				},
				inputCancel(){
					this.inputSearch='';
					this.refresh();
				},
				searchDaiBan(){/*搜索*/
					if(this.inputSearch.length==0){
						return false;
					}else{
						if(this.inputSearch!=this.lastInputSearch){/*说明系重新查找*/
							document.removeEventListener('scroll',this.loadMore,true);
							this.daiBai_li = [];
							this.lastInputSearch=this.inputSearch;
							this.getData();
						}
					}
				},
				dealData(date){
					let d = new Date(date);
					let mon = d.getMonth()>9?d.getMonth()+1:'0'+(d.getMonth()+1);
					let D1ate =d.getDate()>9?d.getDate():'0'+d.getDate();
					let hours = d.getHours()>9?d.getHours():'0'+d.getHours();
					let minutes = d.getMinutes()>9?d.getMinutes():'0'+d.getMinutes();
//					return d.getMonth() + 1+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes();
					return mon+'-'+D1ate+' '+hours+':'+minutes;
				},
				getData(){/*获取数据*/
						this.isLoad=false;/*不允许再查，已经到底*/
						let _this = this;
						let layerIndex=layer.msg('加载中', {
							  icon: 16
							  ,shade: 0.01,
							  time: 60000,/*超过10秒，网络出问题*/
							},function(){
							  if(_this.isLoad===false){
							  	layer.alert('网络出问题，请稍后再试');
							  }

							  });
					axios({
						method:'post',
						url:this.url,
						headers : {
					     'Content-Type' : 'application/json'
						},
						data:{
							"state":0,
							"search":this.inputSearch,
							"pageQuery":{
								"pageSize":10,
								"pageNum":this.daiBai_li.length,
							}
						}
						}).then((res)=>{
							console.log(res);
							if(res.data.codeData.length===0){
								layer.msg('无更多数据');
						 		_this.isLoad=true;
								return false;
							}
							for(let i = 0;i<res.data.codeData.length;i++){
								res.data.codeData[i].createdDate=this.dealData(res.data.codeData[i].createdDate);
								this.daiBai_li.push(res.data.codeData[i]);
							}
//							layer.closeAll('loading');
 							_this.isLoad=true;
   							_this.daiBai_li_length = res.data.extra.Total;
							layer.close(layerIndex);
						 	document.addEventListener('scroll',this.loadMore,true);/*绑定滚动事件*/
						}).catch((error)=>{
							console.log(error);
					})
				},
				loadMore(){
						if($('.daiBai_li').scrollTop()+$('.daiBai_li').height()>$('.daiBai_li ul').height()){
							document.removeEventListener('scroll',this.loadMore,true);/*解绑滚动事件，避免多次请求*/
							this.getData();
						}
				},
				openDaiBan(){
					parent.openDaiBan();
				},
			},
			mounted(){
	            document.addEventListener('scroll',this.loadMore,true);/*绑定事件*/
				this.getData();
			},
			updated(){
				if(this.inputSearch.length!=0){
					this.show_cancel_button=true;
				}else{
					this.show_cancel_button=false;
				}
			}

		})
	</script>
</html>
